<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>题目</title>
    <!--引入css-->
    <!--外部样式表-->
    <link rel="stylesheet" href="./style.css">
    <!--引入jquery-->
    <script src="./jquery-3.7.1.js"></script>
    <!--内部样式表-->
    <style>
        body{
            /*background-color: beige;*/
            /*background-image: url("https://www.baidu.com/img/bd_logo1.png?where=super");*/
            /*background-repeat: no-repeat;*/
            /*background-position: top;*/
            /*background-size: cover;*/

        }
    </style>
    <script>
        // tomcat9 包名：javax   tomcat10 及以上 包名：jakarta
        // 方法 function
        function sing() {

        }

        // alert("弹框")
        var name = "18"
        var age = 18
        var num = 1.1
        var flag = true

        // ctrl+shift + enter
        //对象
        var obj = {
            name:'zhangsan',
            age: 20,
            eat: function () {
                console.log("吃东西")
            },
        }
        obj.eat()

        var arr = [1,2,3]
        arr[0]

        var arr1 = new Array()
        arr1[0] = 1
        arr1[1] = 2

        var a = 1
        a = null
        console.log(a)

        console.log(typeof name)
        console.log(typeof age)
        console.log(typeof obj)
        console.log(typeof flag)

        console.log(name == age)
        console.log(name === age)
        console.log(obj)

        console.log(JSON.stringify(obj))
        console.log(JSON.parse(JSON.stringify(obj)))

        // 文档加载完成
        window.onload = function () {
            document.getElementById("btn").onclick = function () {
                console.log("btn 事件")
            };


        };
        $(function () {
            // 隐藏p标签
            $("p").hide()

            // id选择器
            var h1 = $("#h1");
            console.log(h1)

            // class选择器
            var clazz = $(".h");
            console.log(clazz)

            $("#btn").click(function () {
                console.log("jquery btn事件")

                var val = $("#username").val(321);
                console.log(val)

            });
        });
    </script>
</head>
<body>

<!--内联样式-->
<h1 style="color: rgb(255,100,200)" id="h1" class="h">标题1</h1>
<h6 id="h6" class="h">标题6</h6>
<p>段落</p>
<p>段落1</p>
<!--注释 ctrl + /  ctrl+shift+/-->
<!--换行-->
<br>
<!--a标签-->
<a href="http://www.baidu.com" target="_blank">a标签</a>

<!--img标签-->
<!--<img src="./tu.png" alt="加载失败">-->

<b>加粗</b>
x<sup>2</sup>

<!--table表格 边框border-->
<table border="1" cellspacing="0">
    <!--th 表头 加粗 居中-->
    <tr>
        <th>序号</th>
        <th>内容</th>
    </tr>
    <!--行 tr-->
    <tr>
        <!--单元格 列 td-->
        <td>第一行，第一列</td>
        <td>第一行，第二列</td>
    </tr>
    <!--行 tr-->
    <tr>
        <!--单元格 列 td-->
        <td>第二行，第一列</td>
        <td>第二行，第二列</td>
    </tr>
</table>

<!--无序列表-->
<ul>
    <li>Coffee</li>
    <li>Milk</li>
</ul>
<!--有序列表 ol-->
<ol type="i">
    <li>coffee</li>
    <li>tea</li>
</ol>
<!--自定义列表-->
<dl>
    <dt>Coffee</dt>
    <dd>- black hot drink</dd>
    <dt>Milk</dt>
    <dd>- white cold drink</dd>
</dl>

<div>div1</div>
<div>div2</div>

<span>span1</span>
<span>span2</span>

<div style="text-align: center">
    <!--表单标签 form get请求 post请求-->
    <form action="#" method="get">
        账号：<input type="text" name="username" id="username" > <br>
        密码：<input type="password" name="password"> <br>
        性别: <input type="radio" name="sex" value="man">男
        <input type="radio" name="sex" value="men">女 <br>
        复选框：<input type="checkbox" name="hobby" value="sing">唱歌
        <input type="checkbox" name="hobby" value="ju">跳远
        <br>
        备注：<textarea name="status"  ></textarea> <br>
        下拉：<select name="city" id="city">
        <option value="xju">新疆</option>
        <option value="sichuan">四川</option>
    </select>
        <br>
        <input type="submit" value="登录">
        <button id="btn">按钮</button>
    </form>
</div>

<div style="width: 100px;height: 200px;background-color: beige;border:10px solid red">

</div>
</body>
</html>